<script setup>
import { reactive, ref, nextTick, onUpdated } from 'vue'

// 变量
const list = ref([
  {
    id: 1,
    name: '小明',
    isShow: true
  },
  {
    id: 2,
    name: '小化',
    isShow: true
  },
  {
    id: 3,
    name: '小里',
    isShow: true
  },
  {
    id: 4,
    name: '小牛',
    isShow: true
  }
])

const del = (item) => {
  list.value = list.value.filter(v => v.id !== item.id)
}
const add = () => {
  const newItem = {
    id: Date.now(),
    name: Math.random().toString(36).substr(2, 5),
    isShow: true
  }

  list.value.splice(0, 0, newItem)
  // nextTick(() => {
  //   newItem.isShow = true
  // })
}
// onUpdated(() => console.log(111))

</script>

<template>
  <div class="animation">
    <button @click="add">添加一项</button>
    <transition-group
      name="fade"
      tag="div"
    >
      <p
        v-for="(item, index) in list"
        :key="item.id"
      >
        {{ item.name }}
        <span @click="del(item)">删除</span>
      </p>
    </transition-group>
  </div>
  <hr />
</template>

<style lang="scss" scoped>
.animation {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}
p{
  font-size: 30px;
  margin: 5px auto;
  background: tomato;
  height: 40px;
  display: flex;
  overflow: hidden;
  width: 400px;
}
span {
  font-size: 20px;
  line-height: 40px;
  margin-left: 40px;
  color: #00f;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-in-out;
  cursor: pointer;
}
p:hover span {
  pointer-events: auto;
  opacity: 1;
}
.fade-enter-active, .fade-leave-active {
  transition:
    opacity 0.75s,
    margin 0.5s 0.25s,
    height 0.5s 0.25s,
    transform 0.75s
  ;
  transition-timing-function: linear;
}
.fade-enter-from {
  opacity: 0;
  height: 0;
  margin: 0;
  transform: scale(0.5);
}
.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  height: 0;
  margin: 0 auto;
  transform: translateX(30px);
}
</style>
